<template>
	<view class="evaluate">
		<view class="order_info">
			<image class="cover_img" :src="orderInfo.image" mode="aspectFill"></image>
			<view class="">
				<view class="title">{{ orderInfo.storeName }}</view>
				<view class="time">时间：{{ orderInfo.payTime }}</view>
				<view class="other_info">
					<view class="tags">
						<view class="" v-for="(v,i) in orderInfo.labelList" :key="i">{{ v }}</view>
					</view>
					<view class="price">
						<text>￥</text>
						<text class="pirce_val">{{ orderInfo.price }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="score">
			<text class="score-label">评分</text>
			<uni-rate v-model="data.productScore" @change="onChange" :size="16" margin="10" active-color="#F17816" color="#E6E6E6" />
		</view>
		<view class="desc_content">
			<textarea v-model="data.comment" class="textarea-box" placeholder="快来评价商品吧~" placeholder-style="color:#B3B3B3;"></textarea>
			<view class="img_list">
				<block v-for="(img,i) in imageList" :key="i">
					<view class="img">
						<image :src="img" mode="aspectFill" class="image-icon" @click.stop="previewImg(i)" />
						<image src="../static/close.png" mode="widthFix" class="close-icon" @click.stop="delImg(i)" />
					</view>
				</block>
				<view class="upload_btn" @tap="chooseFile" v-if="imageList.length< maxCount">
					<image src="/static/mine/shangchuan.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="btn" @click="submitComment">提交</view>
	</view>
</template>

<script>
	import baseUrl from "@/libs/config.js"
	export default {
		data() {
			return {
				id: '',
				orderInfo: null,
				maxCount: 9,
				imageList: [],
				BASE_URL: baseUrl.baseUrl,
				data: {
					comment: '',
					pics: '',
					productScore: 0,
					orderNo: ''
				},
				
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.getOrderDetails()
		},
		
		methods: {
			async getOrderDetails() {
				const res = await this.$api.get('order/details', {
					id: this.id
				});
				console.log(res, "商品详情")
				if (res.code == 200) {
					if(res.data.label) {
						res.data.labelList = res.data.label.split(',');
					}else {
						res.data.labelList = []
					}
					this.orderInfo = res.data;
					this.data.orderNo = res.data.orderNo;
				}
			},
			async chooseFile() {
				uni.chooseImage({
					count: this.maxCount - this.imageList.length,
					sourceType: ['album'],
					success: (res) => {
						this.list = []
						res.tempFilePaths.forEach(item => {
							this.upImg(item)
							// this.imageList.push(item)
						})
					}
				});
			},
			upImg(path) {
				uni.showLoading({
					title: '上传中...'
				})
				uni.uploadFile({
					url: `${this.BASE_URL}api/front/upload/image?pid=7&model=user`,
					filePath: path,
					name: 'multipart',
					header: {
						'Authori-zation': uni.getStorageSync('token'),
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						// console.log(res, "res----")
						uni.hideLoading()
						const resData = JSON.parse(res.data)
						if (resData.code == 200) {
							this.imageList.push(resData.data.url)
						} else {
							this.showToast(resData.message)
						}
					},
					fail: (err) => {
						uni.hideLoading();
						// this.showToast('上传失败')
					}
				});
			},
			onChange(e) {
				this.data.productScore = e.value;
			},
			async submitComment() {
				this.data.pics = this.imageList.join(',');
				const res = await this.$api.post('order/comment', this.data);
				if(res.code == 200) {
					this.showToast('评价成功')
					setTimeout(v => {
						uni.navigateBack()
					},2500);
				}else {
					this.showToast(res.message);
				}
			},
			delImg(i) {
				console.log(i)
				this.imageList.splice(i,1);
			},
			previewImg(current) {
				console.log(current)
				uni.previewImage({
					current,
					urls: this.imageList
				})
			}
		},
	}
</script>

<style lang="scss">
	.evaluate {
		padding: 26rpx;
		box-sizing: border-box;

		.order_info {
			display: flex;
			align-items: flex-start;
			padding-bottom: 14rpx;
			border-bottom: 1rpx dashed #F0F0F0;
			margin-bottom: 40rpx;

			.cover_img {
				width: 200rpx;
				height: 160rpx;
				border-radius: 14rpx;
				margin-right: 16rpx;
			}

			>view {
				flex: 1;

				.title {
					width: 420rpx;
					font-size: 30rpx;
					line-height: 30rpx;
					font-weight: bold;
					color: #1A1A1A;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.time {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #999999;
					padding: 14rpx 0 22rpx;
				}

				.other_info {
					display: flex;
					justify-content: space-between;

					.tags {
						display: flex;
						align-items: center;

						>view {
							font-size: 22rpx;
							line-height: 22rpx;
							padding: 8rpx 12rpx;
							color: #FF8F01;
							background-color: #FFF2E2;
						}

						>view:not(:last-child) {
							margin-right: 20rpx;
						}
					}

					.price {
						font-size: 24rpx;
						font-weight: bold;
						color: #FF0404;

						.pirce_val {
							font-size: 34rpx;
							color: #FF0000;
						}
					}
				}
			}
		}

		.score {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: bold;
			margin-bottom: 44rpx;
			.score-label {
				margin-right: 20rpx;
			}
		}

		.desc_content {
			background-color: #F7F7F7;
			border-radius: 20rpx;
			padding: 32rpx 20rpx 20rpx;
			margin-bottom: 92rpx;

			.textarea-box {
				height: 210rpx;
				flex: 1;
				margin-bottom: 30rpx;
				font-size:24rpx;
			}

			.img_list {
				display: grid;
				grid-template-columns: 170rpx 170rpx 170rpx 145rpx;

				.img {
					width: 145rpx;
					height: 145rpx;
					margin-bottom: 20rpx;
					position: relative;

					.image-icon {
						width: 145rpx;
						height: 145rpx;
						border-radius: 12rpx;
						z-index: 1;
					}
					
					.close-icon {
						position: absolute;
						right: -12rpx;
						top: -12rpx;
						width: 28rpx;
						height: 28rpx;
						border-radius: 50%;
						z-index: 99 !important;
					}
				}

				.upload_btn {
					width: 145rpx;
					height: 145rpx;

					image {
						width: 145rpx;
						height: 145rpx;
						border-radius: 12rpx;
					}
				}
			}
		}

		.btn {
			width: 100%;
			height: 94rpx;
			background-color: #2E80FE;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 14rpx;
			text-align: center;
			line-height: 94rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
		}
	}
</style>